<template>
    <div class="des-activity w-100 h-100">
        <el-card class="box-card-table h-100" shadow="never">
            <div slot="header" class="clearfix">
                <span class="fl">活动详情</span>
                <el-button class="fr" @click="goback" style="padding:6px;">返回</el-button>
            </div>
            <div class="h-100">
                <header>
                    <h2 >{{ruleForm.bA_Name}}</h2>
                    <p>
                        <i class="el-icon-timer"></i>
                        <span>{{ruleForm.bA_Time}}</span>
                    </p>
                </header>
                <article v-html="ruleForm.bA_Content"></article>
                <!-- <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="活动名称：" prop="bA_Name">
                        <span>{{ruleForm.bA_Name}}</span>
                    </el-form-item>
                    <el-form-item label="发布人：" prop="bA_Username">
                        <span>{{ruleForm.bA_Username}}</span>
                    </el-form-item>
                    <el-form-item label="活动时间：" prop="bA_Time">
                        <span>{{ruleForm.bA_Time}}</span>
                    </el-form-item>
                    <el-form-item label="封面图片：" prop="bA_Photo">
                        <img :src="ruleForm.bA_Photo" alt=""  width="300px" height="168px">
                    </el-form-item>
                    <el-form-item label="活动内容：" prop="bA_Content">
                        <div v-html="ruleForm.bA_Content"></div>
                    </el-form-item>
                </el-form> -->
            </div>
        </el-card>
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
// 添加活动
import {getactivityInfo} from '@/api/index.js'

export default {
    name: 'summary-des',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        return {
            ruleForm:{
                bA_Name:'',
                bA_Photo:'',
                bA_Content:'',
                bA_Time:'',
                bA_Username:''
            }
        }
    },
    computed:{
        teacherList() {
            return this.$store.state.allTeacherList;
        }
    },
    created(){
        this.activityid = this.$route.query.id;
        if(this.activityid) {
            this._getactivityInfo();
        }
    },
    methods:{
        _getactivityInfo(){
            getactivityInfo({bAID:this.activityid}).then((res) => {
                if(res) {
                    for (const key in this.ruleForm) {
                        if (this.ruleForm.hasOwnProperty(key)) {
                            let _key = key.substr(1);
                            if( _key in res) {
                                this.ruleForm[key] = res[_key];
                            }
                        }
                    }
                }
            })
        },
        // 全选
        goback(){
            this.$router.push({path:'/activity/activity-list'})
        },
    }
}
</script>
<style lang="less">

.des-activity{
    .el-card__body{
        height:calc(100% - 70px);
        box-sizing: border-box;
    }
    box-sizing: border-box;
    header{
        color:#333;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        padding-left: 20px;
        margin-bottom: 20px;
        p{
            font-size: 14px;
            color: #999999;
        }
        h2{
            font-size: 22px;
            height: 50px;
            line-height: 50px;
        }
    }
    article{
        padding: 30px 20px;
    }
    .ql-container.ql-snow{
        min-height: 300px;
    }
    .el-card{
        box-sizing: border-box;
    }
    .box-card-table{
        overflow-y: auto;
        box-sizing: border-box;
    }
}
</style>
